<template>
  <div class="main-layout">
    <SmartNav />
    <main class="main-content">
      <router-view />
    </main>
    <SmartFooter />
    <LoginDialog ref="loginDialog" />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import SmartNav from '@/layout/SmartNav.vue'
import SmartFooter from '@/layout/SmartFooter.vue'
import LoginDialog from '@/components/LoginDialog.vue'

const loginDialog = ref(null)

// 提供全局访问方法
provide('loginDialog', loginDialog)
</script>

<style lang="scss">
.main-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .main-content {
    width: 1280px;
    box-sizing: border-box;
  }
}
</style>
<!--<template>-->
<!--  <div class="main-layout">-->
<!--    &lt;!&ndash; 公共导航 &ndash;&gt;-->
<!--    <SmartNav />-->

<!--    &lt;!&ndash; 主内容区 &ndash;&gt;-->
<!--    <main class="main-content">-->
<!--      <router-view />-->
<!--    </main>-->

<!--    &lt;!&ndash; 公共页脚 &ndash;&gt;-->
<!--    <SmartFooter />-->
<!--    <LoginDialog ref="loginDialog" />-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, provide } from 'vue'-->
<!--import SmartNav from '@/layout/SmartNav.vue'-->
<!--import SmartFooter from '@/layout/SmartFooter.vue'-->
<!--import LoginDialog from '@/components/LoginDialog.vue'-->

<!--const loginDialog = ref()-->

<!--// 确保提供正确的引用-->
<!--provide('loginDialog', loginDialog)-->
<!--</script>-->

<!--<style lang="scss">-->
<!--.main-layout {-->
<!--  min-height: 100vh;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  width: 1280px;-->

<!--  .main-content {-->
<!--    flex: 1;-->
<!--    //padding-top: 2rem;-->
<!--  }-->
<!--}-->


<!--</style>-->